<template>
	<div class="good-recommend">
		<div class="goods-top-menu">
			<div class="goods-menu-left">
				<div class="client-view">
					<el-select v-model="style_id" placeholder="风格分类" @change="init(1)">
						<el-option v-for="item in styleList" :key="item.style_id" :label="item.style_name" :value="item.style_id"></el-option>
					</el-select>
				</div>
				<div class="client-view">
					<el-select v-model="class_id" placeholder="品类" @change="init(1)">
						<el-option v-for="item in classList" :key="item.class_id" :label="item.class_name" :value="item.class_id"></el-option>
					</el-select>
				</div>
			</div>
			<div class="goods-menu-right">
				<refresh-button @refresh="refreshPage"></refresh-button>
				<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
			</div>
		</div>
		<div class="goods-list">
			<div class="goods-item" v-for="(item, index) in goodsList" :key="index" >
				<el-radio v-model="goods_id" :label="item.goods_id">
					<div class="goods-content">
						<ImgPopover style="margin-top: 5px;" :src="item.image_middle"></ImgPopover>
						<div class="text-info">
							<el-tooltip placement="top" effect="light" :content="item.goods_name">
								<p class="goods-name">{{ item.goods_name }}</p>
							</el-tooltip>
							<el-tooltip placement="top" effect="light" :content="item.goods_sn">
								<p class="goods-sn">商品编号：{{ item.goods_sn }}</p>
							</el-tooltip>
							<p class="add-time">上架时间：{{ item.add_time }}</p>
							<div class="text-bottom">
								<p style="color: red;">¥{{ item.retail_price }}</p>
								<p style="color: #ef8200;">人气：{{ item.click }}</p>
							</div>
						</div>
					</div>
				</el-radio>			
			</div>
		</div>
		<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		<div style="padding: 20px 10px;">
			<el-button @click="cancel()">取 消</el-button>
			<el-button type="primary" @click="addFabricClick">确 定</el-button>
		</div>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
export default {
	components: {
		ImgPopover
	},
	props: {
		layerid: {
			type: String,
			default: ''
		},
		goods_ids:{
			type:String,
			default:""
		},
		no_store_id:{
			type: Boolean,
			default: false
		},
	},
	data() {
		return {
			total: 0,
			page: 0,
			classSelect: 0, // 分类搜索
			selectContent: '', // 搜索输入框的值
			searchOption: [{ value: 0, label: '型号' }, { value: 1, label: '商品ID' }, { value: 2, label: '商品名' }],
			styleList: [],
			classList: [],
			style_id: '',
			class_id: '',
			goodsList: [],
			goods_id:""
		};
	},
	methods: {
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				is_sale: 1,
				is_goods: 1,
				store_id: !this.no_store_id?localStorage.getItem('store_id'):'',
				style_id: this.style_id,
				class_id: this.class_id,
				order_by: 'add_time'
			};
			
			if (this.style_id == 0) {
				delete data.style_id;
			}
			if (this.class_id == 0) {
				delete data.class_id;
			}

			if (this.classSelect == 0) {
				data.keyword = this.selectContent;
			} else if (this.classSelect == 1) {
				data.goods_id = this.selectContent;
			} else if (this.classSelect == 2) {
				data.keyword = this.selectContent;
			}
			this.$http(this.$ApiList.GoodsList, data).then(res => {
				this.total = res.datas.count;
				this.goodsList = res.datas.data;
			});
		},
		addFabricClick() {
			if (!this.goods_id) {
				this.$layer.msg('请选择一件拼团商品');
				return;
			}
			this.$parent.setGoodsId(this.goods_id);
			this.$layer.msg('选择成功');
			this.cancel();
		},
		refreshPage() {
			this.page = 1;
			this.style_id = '';
			this.selectContent = '';
			this.classSelect = '';
			this.class_id = '';
			this.init();
		},
		getClassify() {
			// 风格
			this.$http(this.$ApiList.StyleList).then(res => {
				this.styleList = res.datas;
			});
			// 品类
			this.$http(this.$ApiList.ClassList).then(res => {
				this.classList = res.datas.reverse();
			});
		},
		goSearch(classSelect, selectContent) {
			this.classSelect = classSelect;
			this.selectContent = selectContent;
			this.init();
		},
		cancel() {
			this.$layer.close(this.layerid);
		},
	},
	created() {
		if(this.goods_ids){
			this.goods_id = this.goods_ids
			console.log(this.goods_id);
		}
		this.init();
		this.getClassify();
	}
};
</script>
<style lang="scss">
.good-recommend {
	width: 100%;
	padding: 20px 20px;
	.goods-top-menu {
		display: flex;
		.goods-menu-left {
			flex: 1;
			display: flex;
		}
		.goods-menu-right {
			flex: 2;
			display: flex;
			display: flex;
			flex-direction: row-reverse;
		}
		.all-check {
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.client-view {
			margin-right: 10px;
			width: 120px;
		}
	}
	.pages {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.goods-list {
		padding: 10px 0;
		display: flex;
		flex-wrap: wrap;
		.goods-item {
				padding: 15px 10px;
				margin-top: 10px;
				margin-right: 10px;
				display: flex;
				width: 370px;
				height: 144px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				border-radius: 4px;
				cursor: pointer;
				box-sizing: border-box;
				.el-radio{
					display: flex;
				}
				.el-radio__input{
					display: flex;
					align-items: center;
				}
				.goods-content {
					display: flex;
					.img-popover img {
						width: 100px !important;
						height: 100px !important;
					}
				}
		}
		.text-info {
			width: 210px;
			margin-left: 10px;
			.goods-name,
			.goods-sn {
				line-height: 30px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.add-time{
				line-height: 30px;
			}
		}
		.text-bottom {
			display: flex;
			line-height: 30px;
		}
		.text-bottom p {
			flex: 1;
		}
	}
}
</style>
